<template>
  <!-- 导航栏组件 -->
  <div class="box">
    <!-- logo -->
    <div class="logo"><img src="../assets/image/logo.png" alt="" /></div>
    <!-- 搜索框 -->
    <el-autocomplete v-model="searchInfo.video_name" :fetch-suggestions="querySearch" clearable class="inline-input w-50"
      placeholder="请输入搜索内容" @select="handleSelect" />
    <!-- 用户中心 -->
    <!-- <img src="#" alt=""> -->

    <div class="userhead" @click="tologin">
      <el-avatar
          :src="user_img"
      />
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import {useStore} from "vuex";
//axios
const $axios = inject("$axios");
const $store = useStore()
const router = useRouter()
const searching = ref(false)
function tologin() {
  router.push({
    name: "login",
  });
}
// @hjz
//模糊查找
const restaurants = ref([{value:"",video_http:""}])
const responseData = reactive([{name:"",video_http:""}])
const searchInfo = reactive({
  page: 1,
  size: 20,
  video_name: "",
})
const querySearch = (queryString, cb) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  cb(results)
}
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const handleSelect = (item) => {
  //模糊的结果
  console.log(item)
}
const searchVideoByName = () => {
  if (searchInfo.video_name === "") {
    return
  }
  $axios.post("/video/search/name", searchInfo)
    .then((res) => {
      if (res.data.data && res.data.data.length !== 0) {
        res.data.data.forEach((e,i) => {
          // console.log(e)
          responseData[i]=e
        })
      }
    })
}
//添加用户头像
const user_img = ref("")
const getUserImg = ()=>{
  user_img.value=$store.state.img_url
}
watch(searchInfo, (newValue, oldValue) => {
  if (newValue.video_name.length % 2 === 0) {
    searchVideoByName()
  }
})
watch(responseData, (newValue, oldValue) => {
  newValue.forEach((e,i)=>{
    let demo = {value:"",video_http:""}
    demo.value = e.name
    demo.video_http = e.video_http
    restaurants.value.push(demo)
  })
})
onMounted(()=>{
  getUserImg()
})
</script>

<style scoped>
.box {
  width: 100%;
  height: 80px;
  background-color: red;
  padding-top: 20px;
  display: flex;
  justify-content: space-around;
}

.block {
  cursor: pointer;
}

.search {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.search input {
  width: 300px;
  height: 35px;
  border: none;
  outline: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-left: 20px;
}

.searchbotton {
  width: 80px;
  height: 35px;
  background-color: white;
  line-height: 35px;
  text-align: center;
  border-left: 2px solid red;
  font-size: 14px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.seraching {
  width: 400px;
  height: 400px;
  background-color: white;
  position: absolute;
  border-radius: 5px;
  top: 60px;
  z-index: 20;
}

.logo {
  width: 100px;
  position: absolute;
  left: 10%;
}

.logo img {
  width: 110px;
  height: 110px;
}

.userhead {
  width: 80px;
  height: 80px;
  background-color: red;
  border-radius: 100px;
  cursor: pointer;
  position: absolute;
  right: 10%;
}

::v-deep(.el-input--suffix .el-input__inner){
  width: 500px;
  height: 50px;
}
</style>